<template>
  <div class="Contact-container">
    <div class="item">
        <a href="">
            <icon classty="github"/>
            <span>DuYi-Edu</span>
        </a>
    </div>
    <div class="item">
        <a href="mailto:2043970247@qq.com">
            <icon classty="email"/>
        <span>duyi@gmail.com</span>
        </a>
    </div>
    <div class="item">
        <a href="tencent://message/?uin=1259480661&Menu=yes&rel='nofollow'">
            <icon classty="qq"/>
            <span class="qq">204390247</span>
        </a>
        <div class="pop">
            <img src="./ewm.png" alt="">
        </div>
    </div>
    <div class="item">
        <a href="">
            <icon classty="wechat"/>
            <span class="wechat">204397zm</span>
        </a>
        <div class="pop">
            <img src="./ewm.png" alt="">
        </div>
    </div>
  </div>
</template>

<script>
import icon from '../Icon';
export default {
    components:{
        icon,
    }
}
</script>

<style lang="less" scoped>
@import '~@/style/global.less';
@import '~@/style/var.less';
@import '~@/style/min.less';
.Contact-container{
    width: 100%;
    background: transparent;
    color: @lightWords;
    .item{
        position: relative;
        margin:10px 10px;
        &:hover{
            color: @primary;
        }
        .Icon-container{
        font-size: 17px;
       }
       .pop{
         .popup();
         &::before{
            .before();
         }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        } 
       }
       span{
        font-size: 12px;
        margin-left: 5px;
        cursor: pointer;
        }
        &:hover .pop{
            transform: scaleY(1);
        }
    }
}
</style>